<!--  -->
<template>
  <div class="activityW">
    <section class="serviceTop">
      <h1>回收站</h1>
      <div class="blank">
        <img src="../assets/back1.png" alt />
        <router-link to="/Activity">返回</router-link>
      </div>
    </section>
    <saixuan class="sx">
      <el-input placeholder="输入活动标题关键字......" v-model="inpval" clearable></el-input>
    </saixuan>
    <div class="actCon">
      <!-- header -->
      <div class="actCon-head">
        <div class="head-left">
          <img src="../assets/h1.png" alt />
          <p>文章列表</p>
        </div>
      </div>
      <!-- content -->
      <div class="con-table">
        <div class="table-head">
          <li class="headerLi1"></li>
          <li class="headerLi2">标题</li>
          <li class="headerLi2">缩略图</li>
          <li class="headerLi2">活动状态</li>
          <li class="headerLi2">报名费</li>
          <li class="headerLi3">上传人</li>
          <li class="headerLi4">上传时间</li>
          <li class="headerLi5">操作</li>
        </div>
        <div class="table-con" v-for="(item) in list" :key="item.id">
          <li class="headerLi1">
            <input type="checkbox" @click="danClick(index)" :checked="item.isShow" />
          </li>
          <li class="headerLi2">
            <p>
              <span>{{item.tit}}</span>
            </p>
          </li>
          <li class="headerLi2">
            <img src="../assets/actimg.png" alt />
          </li>
          <li class="headerLi2">{{item.state}}</li>
          <li class="headerLi2">{{item.pir}}</li>
          <li class="headerLi3">{{item.name}}</li>
          <li class="headerLi4">{{item.time}}</li>
          <li class="headerLi5">
            <span :plain="true" @click="open2">恢复</span>
            <span @click="open">彻底删除</span>
          </li>
        </div>
      </div>
      <!--  -->
      <div class="acti-footer">
        <div class="acti-input">
          <input type="checkbox" :checked="allCheck1" @click.stop="allCheckbox" />
          <span>全选</span>
          <em :plain="true" @click="openSuc">批量彻底删除</em>
        </div>
        <div class="fyq">
          <div class="block">
            <el-pagination
              :background="true"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="100"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cnp from "../components/biaoti";
import saixuan from "../components/saixuan";
export default {
  name: "Activity",
  components: {
    cnp,
    saixuan,
  },
  data() {
    return {
      inpval: "",
      list: [
        {
          id: 1,
          tit: "【小小渔民体验营】两天一晚渔村生存记",
          state: "活动进行中",
          pir: "256.00",
          name: "Daisy",
          time: "2019-01-25 10:55",
          isShow: false,
        },
        {
          id: 2,
          tit: "【小小渔民体验营】两天一晚渔村生存记",
          state: "活动进行中",
          pir: "256.00",
          name: "Daisy",
          time: "2019-01-25 10:55",
          isShow: false,
        },
        {
          id: 3,
          tit: "【小小渔民体验营】两天一晚渔村生存记",
          state: "活动进行中",
          pir: "256.00",
          name: "Daisy",
          time: "2019-01-25 10:55",
          isShow: false,
        },
        {
          id: 4,
          tit: "【小小渔民体验营】两天一晚渔村生存记",
          state: "活动进行中",
          pir: "256.00",
          name: "Daisy",
          time: "2019-01-25 10:55",
          isShow: false,
        },
        {
          id: 5,
          tit: "【小小渔民体验营】两天一晚渔村生存记",
          state: "活动进行中",
          pir: "256.00",
          name: "Daisy",
          time: "2019-01-25 10:55",
          isShow: false,
        },
        {
          id: 6,
          tit: "【小小渔民体验营】两天一晚渔村生存记",
          state: "活动进行中",
          pir: "256.00",
          name: "Daisy",
          time: "2019-01-25 10:55",
          isShow: false,
        },
        {
          id: 7,
          tit: "【小小渔民体验营】两天一晚渔村生存记",
          state: "活动进行中",
          pir: "256.00",
          name: "Daisy",
          time: "2019-01-25 10:55",
          isShow: false,
        },
        {
          id: 8,
          tit: "【小小渔民体验营】两天一晚渔村生存记",
          state: "活动进行中",
          pir: "256.00",
          name: "Daisy",
          time: "2019-01-25 10:55",
          isShow: false,
        },
        {
          id: 9,
          tit: "【小小渔民体验营】两天一晚渔村生存记",
          state: "活动进行中",
          pir: "256.00",
          name: "Daisy",
          time: "2019-01-25 10:55",
          isShow: false,
        },
        {
          id: 10,
          tit: "【小小渔民体验营】两天一晚渔村生存记",
          state: "活动进行中",
          pir: "256.00",
          name: "Daisy",
          time: "2019-01-25 10:55",
          isShow: false,
        },
        {
          id: 11,
          tit: "【小小渔民体验营】两天一晚渔村生存记",
          state: "活动进行中",
          pir: "256.00",
          name: "Daisy",
          time: "2019-01-25 10:55",
          isShow: false,
        },
      ],
      allCheck1: false,
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
    };
  },
  methods: {
    allCheckbox: function () {},
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    open2: function () {
      this.$message({
        message: "恢复成功",
        type: "success",
      });
    },
    open: function () {
      this.$confirm("删除后恢复，确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    openSuc() {
      console.log();
      this.$message({
        message: "加入回收站成功！",
        type: "success",
        center: true,
      });
    },
    danClick: function (index) {
      this.list[index].isShow = !this.list[index].isShow;
      let bool = this.list.every((item) => {
        return item.isShow == true;
      });
      if (bool) {
        this.allCheck1 = bool;
      } else {
        this.allCheck1 = bool;
      }
    },
    allCheckbox: function () {
      this.list.forEach((v) => {
        v.isShow = !this.allCheck1;
      });
      this.allCheck1 = !this.allCheck1;
    },
  },
};
</script>
<style  scoped>
em,
i {
  font-style: normal;
}
li,
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  font-size: 12px;
  color: #9137f3;
}

h1 {
  height: 70px;
  line-height: 70px;
  font-family: "思源黑体 Bold", "思源黑体 Regular", "思源黑体";
  font-weight: 700;
  font-style: normal;
  font-size: 24px;
  color: #9137f3;
}
.activityW {
  width: 1100px;
  margin: 0 auto;
}
.serviceTop {
  display: flex;
  justify-content: space-between;
}
.blank {
  width: 78px;
  height: 32px;
  border: 1px solid #9137f3;
  border-radius: 0.2em;
  line-height: 32px;
  margin-top: 20px;
}
.blank img {
  padding: 0 10px;
}
.actCon {
  border: 1px solid #e4e4e4;
  min-height: 548px;
  margin-top: 10px;
  padding: 16px 25px;
}
.actCon-head {
  margin: 0 auto;
  width: 1040px;
  height: 72px;
  position: relative;
}
.head-left {
  float: left;
  line-height: 72px;
}
.head-left img {
  display: inline-block;
  width: 16px;
  height: 12px;
  border-width: 0px;
}
.head-left p {
  display: inline-block;
  font-size: 14px;
  color: #666;
  font-family: "思源黑体";
  margin-left: 6px;
}
.head-right {
  text-align: right;
  position: absolute;
  right: 0;
}
.add-article,
.recycle-bin {
  width: 99px;
  height: 32px;
  border: 1px solid rgba(145, 55, 243, 1);
  border-radius: 3px;
  box-sizing: border-box;
  font-size: 12px;
  color: #9137f3;
  margin-top: 16px;
}
.rec-button {
  width: 99px;
  height: 32px;
  margin-top: 16px;
  background-color: none !important;
  font-size: 12px;
  line-height: 32px;
  border: 1px solid #9137f3;
  border-radius: 4px;
}
.el-button {
  padding: 0px !important;
}
.el-button--primary {
  color: #9137f3;
  border-color: #9137f3;
  background-color: #fff !important;
}
.table-head {
  display: flex;
  justify-content: space-between;
  width: 1048px;
  background: #9137f3;
}
.table-head li {
  float: left;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 60px;
  height: 60px;
}
.headerLi1 {
  width: 80px;
}
.headerLi2 {
  width: 118px;
}
.headerLi3 {
  width: 115px;
}
.headerLi4 {
  width: 122px;
}
.headerLi5 {
  width: 257px;
}
.table-con {
  width: 1048px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e4e4e4;
  background: #fff;
  font-size: 12px;
  text-align: center;
}
.table-con li {
  float: left;
  line-height: 90px;
  height: 90px;
}
.table-con li p {
  margin-top: 30px;
  line-height: 14px !important;
}
.table-con li img {
  margin-top: 10px;
}
.headerLi5 span {
  color: #9137f3;
  margin: 0 5px;
}

/*  */
.acti-footer {
  height: 100px;
  width: 100%;
  line-height: 100px;
  margin-top: 10px;
}
.acti-input {
  float: left;
  margin-left: 33px;
}
.acti-input input {
  margin-right: 8px;
}
.acti-input em {
  margin-left: 10px;
  color: #999999;
  font-size: 14px;
}
.fyq {
  margin-top: 34px;
  float: right;
}
</style>